<template>
	<view class="">
		<view class="padding">
			<view class="pannel-top">
				扫二维码向我付款
			</view>
			<view class="pannel-qr">
				<image :src="qrCodeUrl" mode="widthFix"></image>
			</view>
			<view class="">

			</view>
			<u-line></u-line>
			<view class="pannel-botom">
				<view class="pannel-item" @click="saveImage">
					保存二维码
				</view>
				<u-line length="40" direction="col"></u-line>
				<view class="pannel-item" @click="share">
					分享
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrCodeUrl: ''
			}
		},
		mounted() {
			this.getqrcode()
		},
		methods: {
			getqrcode() {
				this.$request.get('/payment/getQRCode', {}).then(res => {
					if (res.code == 200) {
						const qrCodeUrl = 'data:image/png;base64,' + res.data.qrcode;
						this.qrCodeUrl = qrCodeUrl;
					}

				})
			},
			saveImage() {
				// 使用uni.downloadFile下载图片
				uni.downloadFile({
					url: this.qrCodeUrl,
					success: (res) => {
						// res.tempFilePath 是临时文件路径
						this.saveToAlbum(res.tempFilePath);
					},
					fail: (err) => {
						console.error('Download failed', err);
					}
				});
			},
			saveToAlbum(filePath) {
				// 使用uni.saveImageToPhotosAlbum保存图片到相册
				uni.saveImageToPhotosAlbum({
					filePath,
					success: () => {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
						});
					},
					fail: (err) => {
						console.error('Save to album failed', err);
					}
				});
			},
			async saveQRCode() {
				uni.downloadFile({
					url: this.qrCodeUrl,
					success: (res) => {
						console.log(res);
						// res.tempFilePath 是临时文件路径
						// this.saveToAlbum(res.tempFilePath);
					},
					fail: (err) => {
						console.error('Download failed', err);
					}
				});

				// try {
				// 	const downloadResult = await uni.downloadFile({
				// 		url: this.qrCodeUrl,
				// 	});

				// 	if (downloadResult.statusCode === 200) {
				// 		// 下载成功后，保存图片到相册
				// 		const saveResult = await uni.saveImageToPhotosAlbum({
				// 			filePath: downloadResult.tempFilePath,
				// 		});

				// 		if (saveResult.errMsg === 'saveImageToPhotosAlbum:ok') {
				// 			uni.showToast({
				// 				title: '保存成功',
				// 				icon: 'success',
				// 			});
				// 		} else {
				// 			uni.showToast({
				// 				title: '保存失败',
				// 				icon: 'none',
				// 			});
				// 		}
				// 	} else {
				// 		uni.showToast({
				// 			title: '下载失败',
				// 			icon: 'none',
				// 		});
				// 	}
				// } catch (error) {
				// 	console.error(error);
				// 	uni.showToast({
				// 		title: '保存失败',
				// 		icon: 'none',
				// 	});
				// }
			},
			share() {
				// 假设要复制的文本内容
				const textToCopy = this.qrCodeUrl;

				uni.setClipboardData({
					data: textToCopy,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
						});
					},
					fail: (error) => {
						console.error(error);
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					},
				});
			}
		}
	}
</script>

<style>
	.padding {
		background-color: #ffffff;
		width: 90vw;
		height: auto;

		margin: 2rem auto;
	}

	.pannel-top {
		text-align: center;
		color: black;
		font-family: SourceHanSansCN-Regular;
		font-size: 24rpx;
	}

	.pannel-qr image {
		padding: 1rem;
		width: 100%;
		text-align: center;
	}

	.pannel-botom {
		display: flex;
		justify-content: space-around;
		height: auto;
		padding-top: 0.7rem;
	}

	.pannel-item {
		width: 100%;
		height: 2rem;
		text-align: center;
		font-size: 0.6rem;
		line-height: 2rem;

	}
</style>